<!--
 * @Description: 
 * @Author: mxy
 * @Date: 2022-12-02 10:56:50
 * @LastEditors: mxy
 * @LastEditTime: 2022-12-04 20:53:10
-->
<template>
  <div>
    <h2>路由基本使用</h2>
    <a href="#/home">首页</a>&nbsp; <a href="#/movie">电影</a>&nbsp;
    <a href="#/about">关于</a>
    <component :is="comName"></component>
  </div>
</template>

<script>
import MyMovie from "@/components/MyMovie.vue";
import MyAbout from "@/components/MyAbout.vue";
import MyHome from "@/components/MyHome.vue";
export default {
  data() {
    return {
      comName: "MyHome",
    };
  },
  components: { MyMovie, MyHome, MyAbout },
  created() {
    window.addEventListener("hashchange", () => {
      if (location.hash == "#/home") {
        this.comName = "MyHome";
      }
      if (location.hash == "#/movie") {
        this.comName = "MyMovie";
      }
      if (location.hash == "#/about") {
        this.comName = "MyAbout";
      }
    });
  },
};
</script>

<style>
</style>